<template>
  <view class="page-container">
    <wd-navbar :title="detailData.name" safeAreaInsetTop placeholder fixed class="z-2">
      <template #left>
        <wd-icon name="thin-arrow-left" @click="handleNavigateback()" />
      </template>
    </wd-navbar>

    <view class="content-wrapper mt-50px pb-60px">
      <wd-steps :active="activeStep" dot align-center class="pt-20px pb-20px">
        <wd-step title="提交审批" />
        <wd-step title="审批中" />
        <wd-step title="审批完成" />
      </wd-steps>

      <wd-tabs v-model="activeTab" swipeable auto-line-width>
        <wd-tab title="基础信息" name="1">
          <wd-cell-group title="基本信息" border>
            <wd-cell title="纳税号/统一社会信用代码" :value="detailData.no" />
            <wd-cell required title="委托方名称" :value="detailData.name" />
            <wd-cell required title="纳税人类型" :value="detailData.type" />
            <wd-cell required title="联系人" :value="detailData.link" />
            <wd-cell required title="手机号码" :value="detailData.phone" />
            <wd-cell required title="邮箱" :value="detailData.email" />
            <wd-cell required title="客商类型" :value="detailData.email" />
            <wd-cell required title="业务员" :value="detailData.email" />
            <wd-cell required title="跟单员" :value="detailData.email" />
            <wd-cell required title="客户性质" :value="detailData.email" />
            <wd-cell required title="企业类型" :value="detailData.email" />
            <wd-cell required title="注册地区" :value="detailData.email" />
            <wd-cell required title="成立时间" :value="detailData.email" />
            <wd-cell required title="注册资本币种" :value="detailData.email" />
            <wd-cell required title="注册资本" :value="detailData.email" />
            <wd-cell required title="法人代表" :value="detailData.email" />
            <wd-cell required title="申请日期" :value="detailData.email" />
            <wd-cell required title="开始合作日期" :value="detailData.email" />
            <wd-cell title="邮编" :value="detailData.email" />
            <wd-cell required title="地址" :value="detailData.email" />
          </wd-cell-group>
          <wd-cell-group title="审批信息" border>
            <wd-cell title="提交人员" :value="detailData.email" />
            <wd-cell title="提交时间" :value="detailData.email" />
            <wd-cell title="1级审批" :value="detailData.email" />
            <wd-cell title="2级审批" :value="detailData.email" />
            <wd-cell title="审批状态" :value="detailData.email" />
            <wd-cell title="审批时间" :value="detailData.email" />
          </wd-cell-group>
          <wd-cell-group title="系统信息" border>
            <wd-cell title="创建人" :value="detailData.email" />
            <wd-cell title="创建时间" :value="detailData.email" />
            <wd-cell title="修改人" :value="detailData.email" />
            <wd-cell title="修改时间" :value="detailData.email" />
          </wd-cell-group>
        </wd-tab>
        <wd-tab title="客商银行账户" name="2">
          <wd-cell-group border>
            <wd-cell required title="银行CNAPS号" :value="detailData.email" />
            <wd-cell required title="银行" :value="detailData.email" />
            <wd-cell required title="银行账号" :value="detailData.email" />
            <wd-cell required title="银行名称" :value="detailData.email" />
            <wd-cell required title="回去地省市" :value="detailData.email" />
            <wd-cell title="币种" :value="detailData.email" />
            <wd-cell title="SWIFTCODE" :value="detailData.email" />
            <wd-cell title="中行内部联合号" :value="detailData.email" />
            <wd-cell title="业务负责人" :value="detailData.email" />
            <wd-cell title="失效时间" :value="detailData.email" />
            <wd-cell title="税务账户标识" :value="detailData.email" />
            <wd-cell title="默认账号" :value="detailData.email" />
            <wd-cell title="备注" :value="detailData.email" />
            <wd-cell title="主数据编码" :value="detailData.email" />
          </wd-cell-group>
        </wd-tab>
        <wd-tab title="附件" name="3">
          <wd-cell-group border class="file-cell-wrapper">
            <wd-cell v-for="item of fileList" :key="item.id">
              <template #title>
                <view class="flex flex-items-center">
                  <wd-icon name="file-pdf" size="30" />
                  <view class="flex flex-col ml-10px">
                    <wd-text :text="item.name" color="var(--text-primary)" />
                    <wd-text :text="item.createTime" color="var(--text-secondary)" />
                  </view>
                </view>
              </template>
              <view>
                <wd-button type="icon" icon="view" @click="handlePreview(item)" />
                <wd-button type="icon" icon="download" @click="handleDownload(item)" />
              </view>
            </wd-cell>
          </wd-cell-group>
        </wd-tab>
        <wd-tab title="审批情况" name="4">
          <wd-steps vertical dot class="p-10px">
            <wd-step
              v-for="item of approvalInfoList"
              :key="item.id"
              :title="`${item.name} ${item.time}`"
              :description="item.status"
            />
          </wd-steps>
        </wd-tab>
      </wd-tabs>
    </view>

    <wd-tabbar v-if="detailData.status === '1'" v-model="tabbar" fixed bordered safeAreaInsetBottom placeholder>
      <wd-tabbar-item
        title="审批通过"
        icon="read"
        custom-class="tabbar-item-pass"
        @click="handleSgowApprovalPopup(true)"
      ></wd-tabbar-item>
      <wd-tabbar-item
        title="审批驳回"
        icon="close-rectangle"
        custom-class="tabbar-item-back"
        @click="handleSgowApprovalPopup(false)"
      ></wd-tabbar-item>
    </wd-tabbar>

    <wd-popup
      v-model="approvalVisible"
      position="bottom"
      :close-on-click-modal="false"
      custom-style="height: 50vh; background-color: var(--bg-gray);"
    >
      <wd-navbar :title="isPass ? '审批通过' : '审批驳回'" class="z-2">
        <template #left>
          <wd-icon name="close-normal" size="30" @click="handleHideApprovalPopup" />
        </template>
        <template #right>
          <wd-button type="text" @click="handleConfirmApproval">确定</wd-button>
        </template>
      </wd-navbar>

      <wd-text v-if="!isPass" size="13px" text="驳回需要填写驳回原因" lineHeight="40px" class="m-15px"></wd-text>
      <wd-cell :title="isPass ? '备注信息' : '驳回原因'" vertical>
        <wd-textarea
          v-model="approvalContent"
          :maxlength="300"
          show-word-limit
          :placeholder="`请输入${isPass ? '备注信息' : '驳回原因'}`"
        />
      </wd-cell>
    </wd-popup>

    <wd-toast />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useToast } from 'wot-design-uni';

const mockData = {
  id: '1',
  status: Math.random() > 0.5 ? '1' : '2',
  name: '佛山xxxxx有限公司',
  type: '一般纳税人',
  no: '12345678901234567',
  link: '李四',
  phone: '18812222334',
  email: '18812222334@gmail.com',
};
// TODO: api
const getDetailApi = async (_id: string) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: mockData });
    }, 100);
  });
};

const approvalInfoList = ref([
  { id: 1, name: '赵大刚', status: '审批通过', time: '2024-08-23' },
  { id: 2, name: '赵二刚', status: '提交审批，等待审批', time: '2024-08-23' },
]);

const fileList = ref([
  { id: 1, name: '文件1.pdf', type: 'pdf', createTime: '2024-08-23' },
  { id: 2, name: '文件2.pdf', type: 'pdf', createTime: '2024-08-24' },
]);

const approvalVisible = ref(false);
const approvalContent = ref('');
const handleHideApprovalPopup = () => {
  approvalVisible.value = false;
  approvalContent.value = '';
};
const tabbar = ref(1);
const isPass = ref(true);
const handleSgowApprovalPopup = (v: boolean) => {
  isPass.value = v;
  approvalVisible.value = true;
};
const toast = useToast();
const handleConfirmApproval = () => {
  if (!isPass.value && approvalContent.value === '') {
    toast.warning('请输入驳回原因');
    return;
  }
  // TODO: api
  toast.success('操作成功');
  handleHideApprovalPopup();

  setTimeout(() => {
    handleNavigateback();
  }, 1000);
};

const detailData = ref({} as any);
const id = ref('');

const activeStep = ref(2);
const activeTab = ref('1');

const getDetailData = async (_id = id.value) => {
  try {
    const res: any = await getDetailApi(_id);
    detailData.value = res.data ?? {};
  } catch (error) {
    console.error('获取审批详情失败：', error);
  }
};

const handlePreview = (item: any) => {
  console.log(item);
};
const handleDownload = (item: any) => {
  console.log(item);
  toast.success('下载成功');
};

onLoad((option: any) => {
  id.value = option?.id ?? '';
  if (id.value) {
    getDetailData(id.value);
  } else {
    uni.showToast({
      title: '通知不存在',
      icon: 'error',
    });
  }
});

const handleNavigateback = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.redirectTo({
      url: '/pages/work/approval/index',
    });
  }
};
</script>

<style lang="scss" scoped>
.tabbar-item-pass {
  :deep(.wd-badge) {
    .wd-tabbar-item__body {
      // color: var(--success-color);
      .is-inactive,
      .is-active {
        color: var(--success-color);
      }
    }
  }
}
.tabbar-item-back {
  :deep(.wd-badge) {
    .wd-tabbar-item__body {
      // color: var(--danger-color);
      .is-inactive,
      .is-active {
        color: var(--danger-color);
      }
    }
  }
}

.file-cell-wrapper {
  :deep(.wd-cell__right) {
    flex: 0 0 auto;
  }
}
</style>
